<%--
  Created by IntelliJ IDEA.
  User: ruia
  Date: 2021/10/28
  Time: 1:16
  To change this template use File | Settings | File Templates.
--%>

<%@ include file="../common/IncludeTop.jsp"%>


<script type="text/javascript">
    var xhr;
    var category;

    var displayInfo = function ( categoryId ) {
        createXMLHttpRequest();
        category = categoryId;
        let showUrl = 'getProductListByCategory?categoryId=' + categoryId;
        xhr.open( "GET", showUrl, true );
        $( 'area' ).mouseover( function ( event ) {
            event.preventDefault();
        } );
        xhr.onreadystatechange = processResp;
        xhr.send( null );
    }

    function processResp() {
        let respArray, productList;
        if ( xhr.readyState == 4 ) {
            if ( xhr.status == 200 ) {
                /* call empty() to remove all the child element of wrapper div */
                $( '#HoverSidebarContent' ).empty();

                /* encode the response text */
                respArray = xhr.responseText.split( ';' );
                if ( respArray[0] == 'Success' ) {
                    /* initial the title */
                    let $title = $( '<p><strong>' + category.toUpperCase() + '</strong></p>' )
                    $( '#HoverSidebarContent' ).append( $title );
                    productList = respArray[1].split( ',' );
                    let $list = $( '<ul></ul>' );
                    $( '#HoverSidebarContent' ).append( $list );
                    let $listItem;
                    for ( let i = 0; i < productList.length; i++ ) {
                        $listItem = $( '<li>' + productList[i] + '</li>' );
                        $list.append( $listItem );
                    }
                }
            }else{
                console.log('otherwise');
            }

            $( '#HoverSideBar' ).css( 'visibility', 'visible' );
        }
    }

    function hiddenInfo(){
        $( '#HoverSideBar' ).css( 'visibility', 'hidden' );
    }

    function createXMLHttpRequest() {
        if ( window.XMLHttpRequest ) //非IE浏览器
        {
            xhr = new XMLHttpRequest();
        } else if ( window.ActiveObject )//IE6以上版本的IE浏览器
        {
            xhr = new ActiveObject( "Msxml2.XMLHTTP" );
        } else //IE6及以下版本IE浏览器
        {
            xhr = new ActiveObject( "Microsoft.XMLHTTP" );
        }
    }
</script>



<div id="Welcome">
    <h2 id="WelcomeContent">
        Welcome to MyPetStore!
    </h2>
</div>

<div id="Main">
    <table id="Sidebar">
        <div id="SidebarContent">
            <%--用viewCategory请求大类页面并带参数categoryId--%>
                <tr>
                    <td>
                        <a href="viewCategory?categoryId=FISH"><img src="images/fish_icon.gif" /></a>
                        <br />Saltwater, Freshwater<br />
                    </td>
                </tr>
                <tr>
                    <td>
                        <a href="viewCategory?categoryId=DOGS"><img src="images/dogs_icon.gif" /></a>
                        <br /> Various Breeds <br />
                    </td>
                </tr>
                <tr>
                    <td>
                        <a href="viewCategory?categoryId=CATS"><img src="images/cats_icon.gif" /></a>
                        <br /> Various Breeds, Exotic Varieties <br />
                    </td>
                </tr>
                <tr>
                    <td>
                        <a href="viewCategory?categoryId=REPTILES"><img src="images/reptiles_icon.gif" /></a>
                        <br /> Lizards, Turtles, Snakes <br />
                    </td>
                </tr>
                <tr>
                    <td>
                        <a href="viewCategory?categoryId=BIRDS"><img src="images/birds_icon.gif" /></a>
                        <br /> Exotic Varieties
                    </td>
                </tr>
        </div>
    </table>

    <div id="MainImage">
        <div id="MainImageContent">
            <!-- 悬浮窗 -->
            <div id="HoverSideBar" >
                <img>
                <div id="HoverSidebarContent"></div>
            </div>

            <map name="estoremap">
                <area alt="BIRDS" coords="72,2,280,250" href="viewCategory?categoryId=BIRDS" shape="rect" onmouseover="displayInfo(alt) " onmouseout="hiddenInfo()"/>
                <area alt="FISH" coords="2,180,72,250" href="viewCategory?categoryId=FISH" shape="rect" onmouseover="displayInfo(alt) " onmouseout="hiddenInfo()"/>
                <area alt="DOGS" coords="60,250,130,320" href="viewCategory?categoryId=DOGS" shape="rect" onmouseover="displayInfo(alt) " onmouseout="hiddenInfo()" />
                <area alt="REPTILES" coords="140,270,210,340" href="viewCategory?categoryId=REPTILES" shape="rect"onmouseover="displayInfo(alt) " onmouseout="hiddenInfo()" />
                <area alt="CATS" coords="225,240,295,310" href="viewCategory?categoryId=CATS" shape="rect"onmouseover="displayInfo(alt) " onmouseout="hiddenInfo()"/>
                <area alt="BIRDS" coords="280,180,350,250" href="viewCategory?categoryId=BIRDS" shape="rect"onmouseover="displayInfo(alt) " onmouseout="hiddenInfo()" />
            </map>
            <img id="mainImg" height="355" src="images/splash.gif" align="middle" usemap="#estoremap" width="350" />
        </div>
    </div>

    <div id="Separator">&nbsp;</div>

</div>

<%@ include file="../common/IncludeBottom.jsp"%>
